import { createStyles } from "../../utils/index";
// import * as vars from "../../theme";

const styles = {
  root: {
    // ...vars.baseBorder,
    width: "100%",
    height: 4,
    borderRadius: 2,
    position: "absolute",
    left: 0,
    top: 10,
    zIndex: 2,
    flexDirection: "row",
    paddingLeft: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  item: {
    flex: 1,
    // width: 100,
    height: 4,
    borderRadius: 2,
    // borderStyle: "solid",
    // borderWidth: 1,
    // borderColor: "red",
    backgroundColor: "rgba(45, 50, 65, .5)",
    marginRight: 10,
  },
  itemActive: {
    backgroundColor: "rgb(233, 233, 233)",
  },
  itemMini: {
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: "rgba(123, 128, 138, 1)",
    marginRight: 10,
  },
  itemMiniActive: {
    backgroundColor: "rgb(244, 245, 245)",
  },
};

export default createStyles(styles);
